<script>
import sheep from '@/sheep';

export default {
  name: "listHeader",
  props: {
    title: {
      type: String,
      default: '家庭成员'
    },
    width:{
      type: String,
      default: '702rpx'
    },
    showIcon:{
      type: Boolean,
      default: true
    },
    showButton:{
      type: Boolean,
      default: false
    }
  },
  computed: {
    IMG_URL() {
      return sheep.$store('AI').sq_image_path;
    }
  },
  methods: {
    listHeaderIconClick() {
      this.$emit('listHeaderIconClick')
    },
    listHeaderAllClick(){
      this.$emit('listHeaderAllClick')
    }
  },
}
</script>

<template>
  <view class="listHeader flex align-center justify-between" @click.stop="listHeaderAllClick" :style="{
    width: width
  }">
    <view class="listHeader_left flex align-center">
      <text class="listHeader_left_text">{{ title }}</text>
      <image class="listHeader_left_image" v-if="showIcon && !showButton" :src="`${IMG_URL}/index/family_list_edit.png`"
             @click.stop="listHeaderIconClick"></image>
      <slot></slot>
    </view>
    <view class="listHeader_right flex align-center">
      <slot name="button"></slot>
<!--      <image class="listHeader_right_image ml_10"  v-if="showIcon"  :src="`${IMG_URL}/index/arrow_right.png`"></image>-->
    </view>
  </view>
</template>

<style scoped lang="scss">
.listHeader {
  margin: 20rpx 0 20rpx 0;

  .listHeader_left {
    position: relative;
    .listHeader_left_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #000000;
    }

    .listHeader_left_image {
      margin-left: 10rpx;
      width: 25rpx;
      height: 25rpx;
    }
  }

  .listHeader_right {
    .listHeader_right_image {
      width: 24rpx;
      height: 24rpx;
    }
  }
}
</style>